<template>
	<view data-tauri-drag-region class="titlebar" :style="`left:${props.left}`">
		<view class="titlebar-button" @click="minimize">
			<image class="img" src="https://api.iconify.design/mdi:window-minimize.svg"></image>
		</view>
		<view class="titlebar-button" @click="maximize">
			<image class="img" src="https://api.iconify.design/mdi:window-maximize.svg"></image>
		</view>
		<view class="titlebar-button" @click="close">
			<image class="img" src="https://api.iconify.design/mdi:close.svg"></image>
		</view>
	</view>
</template>

<script setup>
	import { Window } from '@tauri-apps/api/window';
	
	const props = defineProps({
		left:{
			type:String,
			default:()=>{
				return '36px'
			}
		}
	})

	const appWindow = new Window('main');

	// 最小化
	function minimize() {
		appWindow.minimize()
	}
	// 最大化
	function maximize() {
		appWindow.toggleMaximize()
	}
	// 关闭
	function close() {
		appWindow.close()
	}
</script>

<style lang="scss">
	.titlebar {
		height: 44px;
		user-select: none;
		display: flex!important;
		justify-content: flex-end!important;
		position: fixed!important;
		top: 0;
		right: 0;
		z-index: 999;
	}

	.titlebar-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 100%;
		user-select: none;
		-webkit-user-select: none;
	}

	.titlebar-button:hover {
		background: #f1f1f1;
	}
	
	.titlebar-button .img{
		width: 14px;
		height: 14px;
	}
</style>